window.onload = function () {
    // nav左导航栏单击效果
    // var nav_lis = document.querySelectorAll('.nav_ul > li')
    // console.log(nav_lis);
    // nav_lis.forEach(function (val, index) {
    //     console.dir(val);
    //     val.addEventListener('click', function () {
    //         this.style.backgroundColor = '#21b46d';
    //     })
    // })


    var btn_show = document.getElementById('click');
    var btn_hide = document.getElementById('close');
    var box = document.getElementById('box');


    // 登录页js
    // 设置弹窗登录页
    btn_show.addEventListener('click', function () {
        box.style.display = 'block';
        table.style.display = 'none';
    })
    btn_hide.addEventListener('click', function () {
        box.style.display = 'none';
        // body.style.backgroundColor = '#fff';
    })



    // 单击用户名value效果变化
    var inputs = document.getElementsByClassName('text');
    // for (var i = 0; i < inputs.length; i++) {
    //     inputs[i].addEventListener("focus", function () {
    //         console.log(i);
    //         // 循环已结束，i恒为0
    //     })
    // }

    // var i = 0;
    // do {
    //     inputs[i].addEventListener("focus", function () {
    //         this.value = '';
    //         this.style.color = '#333'
    //     })
    //     i++;
    // } while (i < 2);这样才对

    inputs[0].addEventListener("focus", function () {
        if (this.placeholder == '中国好声音第二季') {
            this.placeholder = '';
            this.style.color = '#333'
        }
    })
    inputs[0].addEventListener("blur", function () {
        if (this.value == '') {
            this.placeholder = '中国好声音第二季';
            this.style.color = '#999'
        }
    })

    inputs[1].addEventListener("focus", function () {
        if (this.placeholder == '请输入用户名/电话号码/邮箱...') {
            this.placeholder = '';
            this.style.color = '#333'
        }
    })
    inputs[1].addEventListener("blur", function () {
        if (this.value == '') {
            this.placeholder = '请输入用户名/电话号码/邮箱...';
            this.style.color = '#999'
        }
    })



    // 密码框小眼睛变化效果
    var img = document.querySelector('#box > img');
    var input = document.querySelector('#code');
    var flag = 0;
    img.addEventListener('click', function () {
        if (flag == 0) {
            img.src = 'img/open.jpg';
            input.type = 'text';
            flag = 1;
        } else {
            img.src = 'img/close.jpg';
            input.type = 'password';
            flag = 0;
        }
    })



    // 鼠标移动登录页
    var h3 = document.querySelector('h3');
    h3.addEventListener('mousedown', function (e) {
        //得到鼠标在盒子里的坐标
        var x = e.pageX - box.offsetLeft;
        var y = e.pageY - box.offsetTop;
        console.log(x, y);
        document.addEventListener('mousemove', move)
        //把函数提出来起名是为了下面方便清除这个移动事件
        function move(e) {
            box.style.left = e.pageX - x + 'px';
            box.style.top = e.pageY - y + 'px';
        }
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move)//直接写move就行，不用把上面的函数都复制一遍了
        })
    })



    // 点击登录页的注册按钮 隐藏登录页 出现注册页
    var btn2 = document.querySelector('#btn2');
    var table = document.querySelector('table');
    btn2.addEventListener('click', function () {
        box.style.display = 'none';
        table.style.display = 'block';
    })
    // 点击登录按钮
    var btn1 = document.querySelector('#btn1');
    btn1.addEventListener('click', function () {
        // 账号密码框不为空(空格也不算) 登陆成功
        if (inputs[1].value !== '' && inputs[1].value.trim().length !== 0 && input.value !== '' && input.value.trim().length !== 0) {
            box.style.display = 'none';
            alert('欢迎登录！');
        } else {
            alert('请填写完整！');
        }
    })
    // 登录页js结束


    // 注册页js
    var move = document.getElementById('move');
    var key = document.getElementsByClassName('key')
    var nan = document.getElementById('nan');
    var nv = document.getElementById('nv');
    // var flag = true; 用户只填写一栏，for循环结束后flag=false；用户再补充完整，然后单击按钮时，flag是以false传进去的,它读取不到这一行，所以要写在里面。
    move.onclick = function () {
        var flag = true; //flag一定要定义在单机函数里面，不然执行函数时，用户只填写一栏，for循环结束后flag=false；用户再补充完整，然后单击按钮时，flag重新被赋值为true；
        for (i = 0; i < key.length; i++) {
            if (key[i].value == '' || key[i].value.trim().length == 0) {
                flag = false;
            }
        }
        if ((nan.checked == true || nv.checked == true) && flag == true) {
            alert('注册成功');
        } else {
            alert('请填写完整');
        }
    }

    // 注册页的登录按钮跳转去登录页
    var table_btn = document.querySelector('#table_btn');
    table_btn.addEventListener('click', function () {
        table.style.display = 'none';
        box.style.display = 'block';
    })
    // 注册页js结束


    // nav栏js
    var pay_l = document.querySelector('.pay_l');
    var pay_r = document.querySelector('.pay_r');
    var nav_ol_l = document.querySelector('.nav_ol_l');
    var ol_r = document.querySelector('.ol_r');

    // Vip开通按钮
    pay_l.addEventListener('mouseover', function () {
        nav_ol_l.style.display = 'block';
        this.className = 'pay_l top';
    })
    pay_l.addEventListener('mouseout', function () {
        nav_ol_l.style.display = 'none';
        this.className = 'pay_l bottom';
    })
    nav_ol_l.addEventListener('mouseover', function () {
        this.style.display = 'block';
        pay_l.className = 'pay_l top';
    })
    nav_ol_l.addEventListener('mouseout', function () {
        this.style.display = 'none';
        pay_l.className = 'pay_l bottom';
    })


    // 充值按钮
    pay_r.addEventListener('mouseover', function () {
        ol_r.style.display = 'block';
        this.className = 'pay_r top'
    })
    pay_r.addEventListener('mouseout', function () {
        ol_r.style.display = 'none';
        this.className = 'pay_r bottom btm';
    })
    ol_r.addEventListener('mouseover', function () {
        this.style.display = 'block';
        pay_r.className = 'pay_r top up';
    })
    ol_r.addEventListener('mouseout', function () {
        this.style.display = 'none';
        pay_r.className = 'pay_r bottom btm';
    })
}
